<template>
	<view>
		<head-navbar :back="true">
			<view>公告列表</view>
		</head-navbar>
		<view class="list">
			<view class="item" v-for="item in noticeList" @click="toPage(0,'/pages/noticeList/noticeDetail?title='+item.title + '&content=' + item.content + '&time=' + item.createTime)">
				<view class="title">{{item.title}}</view>
				<view class="content"><rich-text :nodes="item.content"></rich-text></view>
			</view>
			<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
			 @loadmore='laodmore' :loadText="loadText" />
		</view>
	</view>
</template>

<script>
	import * as api from '../../api/index/index'
	export default{
		data() {
			return {
				noticeList: [],
				status: 'loading',
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
			}
		},
		onLoad() {
			this.getContent()
		},
		methods:{
			laodmore(){
				this.status = 'loading'
				this.list = []
				this.getContent()
			},
			// 获取公告列表
			async getContent() {
				try {
					const res = await api.getIndexContent();
					this.noticeList = res.data.obj;
					this.status = 'nomore'
				} catch (error) {
					this.status = 'loadmore'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding: 20rpx;
		padding-top: 0rpx;
	}
	.item{
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.title{
			font-size: 35rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.content{
			color: #949494;
			margin-top: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>
